<template>
  <div class="pagination">
    <el-pagination
      v-model:currentPage="obj.page"
      v-model:pageSize="obj.size"
      :page-sizes="pageSize"
      :layout="screenWidth >900 ? layout :'total, prev, pager, next'"
      :total="obj.count"
      background
      :small="small"
      :hide-on-single-page="false"
      @size-change="sizeChange"
      @current-change="pageChange"
    />
  </div>
</template>

<script>
export default {
  name: "laPagination",
  components: {},
  data() {
    return {
      screenWidth: null,
    };
  },
  props: {
    modelValue: Object,
    pageSizes: {
      type: String,
      default() {
        return [15, 20, 30, 40];
      },
    },
    layout: {
      type: String,
      default() {
        return "total, sizes, prev, pager, next, jumper";
      },
    },
    small: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
  mounted() {
    this.screenWidth = document.body.clientWidth;

    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth;
      })();
    };
  },
  computed: {
    obj: {
      get() {
        return this.modelValue;
      },
      set(value) {
        this.$emit("update:modelValue", value);
      },
    },
  },
  watch: {
    screenWidth: {
      handler: function (val) {
        if (val < 900) {
          // console.log(val+'屏幕宽度小于900px')
        } else {
          // console.log(val+'屏幕宽度大于900px')
        }
      },
      immediate: true,
      deep:true
    },
  },
  methods: {
    sizeChange(size) {
      // this.obj.current_page = 1;
      // this.obj.page_size = size;

      this.$emit("change");
    },
    pageChange(page) {
      this.$emit("change");
    },
  },
};
</script>
